<template>
  <div>
    <input v-model="inputText" @input="updateText" placeholder="请输入内容">
    <p>{{ inputText }}</p>
    <button @click="clearText">清空</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      inputText: ''
    }
  },
  methods: {
    updateText() {
      // 实时更新文本
    },
    clearText() {
      this.inputText = ''
    }
  }
}
</script>

<style scoped>
input {
  padding: 8px;
  margin: 10px 0;
  width: 300px;
}
button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #389a70;
}
</style>